<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="checkbox"    v-check-all="{list:todos,selectlist:ischeckdate}">
    <div v-for="todo in todos">
        <input v-model="ischeckdate" type="checkbox" :value=todo.id> {{todo.id}} {{todo.text}}
    </div>
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
    Vue.directive('checkAll', {
        bind: function (el, binding) {
            var recordnumber = binding.value.list.length;
            var ischecknumber = binding.value.selectlist.length;
            if (recordnumber == ischecknumber) {
                el.checked = true
            }
            else {
                el.checked = false
            }
            console.log(el.checked)
        },
//        inserted: function(el, binding){
//            console.log('insert:',binding.value);
//        },
        update: function(el, binding, vnode, oldVnode) {
            console.log(el.checked)
            var recordnumber = binding.value.list.length;
            var ischecknumber = binding.value.selectlist.length;
            if (recordnumber == ischecknumber) {
                el.checked = true
            }
            else {
                el.checked = false
            }
//            console.log(el)
        },
//        componentUpdated: function(el, binding){
//            console.log(el.checked)
//        }
    })
var vm=new Vue({
        el: '#app',
        data: {
            todos: [
                {id: 'aaa', text: 'Learn JavaScript'},
                {id: 'bbb', text: 'Learn Vue.js'},
                {id: 'ccc', text: 'Build Something Awesome'},
                {id: 'ddd', text: 'Build Something Awesome'},
                {id: 'eee', text: 'Build Something Awesome'}
            ],
            ischeckdate: ['aaa', 'bbb', 'ccc', 'ddd']
        }
    });
//    console.log(vm.ischeckdate)
//    vm.ischeckdate=['aaa', 'bbb', 'ccc', 'ddd','eee']
</script>
</body>
</html>
